<template>
  <div>
    <!-- 导航栏 -->
    <Rotatingposition></Rotatingposition>

    <!-- 空间 -->
    <div style="width: 100%; height: 50px;"></div>

    <!-- 折线图标题从ECharts配置中设置 -->
    <div class="chart-wrapper">
      <div ref="chartRef" class="chart"></div>
    </div>

    <!-- 商品推荐标题 -->
    <h2 class="product-title">商品推荐 Top 8</h2>
    <div class="contant">
      <div class="shangpin" v-for="(item, index) in list" :key="index">
        <div class="imgsize">
          <img :src=" item.ImageLink === '空' ? defaultImage : item.ImageLink">
        </div>
        <div class="text">名称：{{ item.Title }}</div>
        <div class="details">
          <div>店铺名称：{{ item.Shop }}</div>
          <div>品类名称：{{ item.category }}</div>
          <div class="link">
            <a :href="item.Link" target="_blank" rel="noopener noreferrer">商品链接跳转</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import Rotatingposition from "../myhome/aYongHu/Rotatingposition.vue";
import axios from 'axios';

export default defineComponent({
  name: 'ProductDetails',
  components: { Rotatingposition },
  setup() {
    const chartRef = ref(null);

    // 在 onMounted 钩子中初始化图表
    onMounted(() => {
      const chartInstance = echarts.init(chartRef.value);
      chartInstance.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', boundaryGap: false, data: [] }, // 初始为空，稍后动态填充
        yAxis: { type: 'value' },
        series: [
          {
            name: '热度',
            type: 'line',
            stack: '总量',
            data: [],  // 初始为空，稍后动态填充
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#66ccff' },
                { offset: 1, color: '#ffffff' },
              ]),
            },
            lineStyle: { color: '#3398DB', width: 2 },
            itemStyle: { color: '#66ccff' },
          },
        ],
      });
    });

    const list = ref([]); // 商品推荐数据

    return {
      defaultImage: require('@/assets/images/默认图片.png'),
      chartRef,
      list,
    };
  },

  created() {
    this.fetchData(); // 组件创建时获取数据
  },

  methods: {
    async fetchData() {
      try {
        // 获取商品推荐数据
        const cat = this.$route.params.id
        const response = await axios.post('http://127.0.0.1:8000/api/hotstore/', {  category: cat }); // 替换为你的 API 地址
        this.list = response.data.slice(0, 8);

        // 获取图表数据
        const res = await axios.post('http://127.0.0.1:8000/api/line/', { category: cat });
        const data = res.data;

        // 获取图表实例
        const chartInstance = echarts.init(this.$refs.chartRef);

        // 动态设置图表选项
        chartInstance.setOption({
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.Shop, // 使用接口返回的店铺名称作为x轴数据
          },
          series: [
            {
              name: '热度',
              type: 'line',
              stack: '热度',
              data: data.StorePrice, // 使用接口返回的价格数据作为y轴数据
            },
          ],
        });

      } catch (error) {
        console.error('获取数据时发生错误:', error);
      }
    },
  },
});
</script>

<style scoped>
/* 折线图容器 */
.chart-wrapper {
  width: 85%;
  margin: 0 auto;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 30px;
}

.chart {
  width: 100%;
  height: 350px;
}

/* 商品推荐标题稍微居中且靠左 */
.product-title {
  margin-left: 10%;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  text-align: left;
}

.contant {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.shangpin {
  width: 20%;
  height: 300px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 10px;
  margin: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.shangpin:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.imgsize {
  width: 90%;
  height: 60%;
  margin: 0 auto;
}

.imgsize img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 10px;
  font-weight: bold;
}

.details {
  margin-top: 10px;
  font-size: 14px;
}

.link a {
  color: #3398DB;
  text-decoration: none;
  transition: color 0.2s;
}

.link a:hover {
  color: #66ccff;
}
</style>
